<template>
		<el-form :model="user" ref="loginRef" status-icon>
				<el-form-item prop="phone">
					<el-input v-model="user.phone" placeholder="手机号">
						<template #prefix>
							<el-icon><Phone /></el-icon>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item prop="verifyCode">
					<el-input v-model="user.verifyCode" placeholder="手机验证码">
						<template #suffix>
							<PhoneCode @get-very-code="getVeryCode" :phone="user.phone"></PhoneCode>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="bindLoginPhone">登录</el-button>
					<a href="#" @click="$emit('bindChange', true)">密码登录</a>
				</el-form-item>
		</el-form>
</template>

<script setup lang="ts">
import { ref, type Ref, onMounted, reactive } from 'vue'
import { Phone, Lock } from '@element-plus/icons-vue'
import PhoneCode from './PhoneCode.vue'
import { api } from '@/api/index'
import { ElMessage } from 'element-plus'
const { RequesetVeryCode, RequestLogin } = api
defineEmits(['bindChange'])
interface IPhoneUser {
	phone: string
	verifyCode: string
}

const user = reactive<IPhoneUser>({
	phone: '',
	verifyCode: ''
})
const phoneCode = ref<string>()

const bindLoginPhone = () => {
	if (phoneCode.value !== user.verifyCode) {
		ElMessage({
			showClose: true,
			message: '手机验证码不正确!',
			type: 'error'
		})
		return
	}
	ElMessage({ message: '切换密码登录!' })
}

/**
 * 生成验证码
 */
const getVeryCode = async () => {
	const data = await RequesetVeryCode()
	const { resultCode, resultInfo } = data
	if (resultCode === 1) {
		const { code, data } = resultInfo
		phoneCode.value = code
		setTimeout(() => {
			ElMessage({
				showClose: true,
				message: '验证码: ' + code,
				type: 'error'
			})
		}, 2000)
	}
}
</script>

<style scoped lang="scss">
form {
	background-color: white;
	border-radius: 8px;
	padding: 30px 25px;
	.el-button {
		width: 100%;
	}
}
</style>
